<md-dialog aria-label="add account" ng-style="setDialogWidth()">
    <div ng-show="publicInfo.isLoading" layout="row" layout-align="center center" layout-margin layout-padding>
        <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    </div>
    <form ng-cloak ng-show="publicInfo.status === 'choose' && !publicInfo.isLoading">
        <md-dialog-content>
            <div class="md-dialog-content">
                <div style="margin-bottom: 20px;">请选择添加账号类型：</div>
                <md-radio-group ng-model="publicInfo.accountType">
                    <md-radio-button value="port">
                        端口
                    </md-radio-button>
                    <md-radio-button value="mac">
                        MAC地址
                    </md-radio-button>
                    <md-radio-button value="giftcard" ng-if="publicInfo.isGiftCardUse">
                        充值码
                    </md-radio-button>
                    <md-radio-button value="refCode" ng-if="publicInfo.isRefCodeUse">
                        邀请码
                    </md-radio-button>
                </md-radio-group>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="publicInfo.hide()">
                关闭
            </md-button>
            <md-button class="md-primary" ng-click="publicInfo.next()">
                下一步
            </md-button>
        </md-dialog-actions>
    </form>
    <form ng-cloak ng-show="publicInfo.status === 'port' && !publicInfo.isLoading">
        <md-dialog-content>
            <div class="md-dialog-content">
                <div layout="row" layout-wrap flex ng-show="publicInfo.account.length === 0">
                    暂无可分配的账号
                </div>
                <div layout="row" layout-wrap flex ng-show="publicInfo.account.length">
                    <div flex="50" flex-md="33" flex-gt-md="25" ng-repeat="a in publicInfo.account">
                        <md-checkbox ng-model="a.isChecked">
                            {{ a.port }}
                        </md-checkbox>
                    </div>
                </div>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="publicInfo.hide()">
                关闭
            </md-button>
            <md-button class="md-primary" ng-click="publicInfo.setPort()">
                确定
            </md-button>
        </md-dialog-actions>
    </form>
    <form ng-cloak ng-show="publicInfo.status === 'mac' && !publicInfo.isLoading">
        <md-dialog-content>
            <div class="md-dialog-content">
                <md-input-container class="md-block">
                    <label>MAC地址</label>
                    <input type="text" required name="macAddress" ng-model="publicInfo.mac.macAddress">
                </md-input-container>
                <md-input-container class="md-block" style="height: 54px;">
                    <label>端口</label>
                    <md-select ng-model="publicInfo.mac.account">
                        <md-option ng-value="account.id" ng-repeat="account in publicInfo.account">{{ account.port }}</md-option>
                    </md-select>
                </md-input-container>
                <md-input-container class="md-block" style="height: 54px;">
                    <label>服务器</label>
                    <md-select ng-model="publicInfo.mac.server">
                        <md-option ng-value="server.id" ng-repeat="server in publicInfo.validServer">{{ server.name }}</md-option>
                    </md-select>
                </md-input-container>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="publicInfo.hide()">
                关闭
            </md-button>
            <md-button class="md-primary" ng-click="publicInfo.setMac()" ng-disabled="!publicInfo.isMacAddress(publicInfo.mac.macAddress)">
                确定
            </md-button>
        </md-dialog-actions>
    </form>
    <form ng-cloak ng-show="publicInfo.status === 'giftcard' && !publicInfo.isLoading">
        <md-dialog-content>
            <div class="md-dialog-content">
                <div style="margin-bottom: 20px;">请选择充值的端口：</div>
                <md-radio-group ng-model="publicInfo.giftcardAccountId">
                    <md-radio-button value="{{account.id}}" ng-repeat="account in publicInfo.userAccount">
                        {{ account.port }}
                    </md-radio-button>
                    <md-radio-button value="0">
                        新建端口
                    </md-radio-button>
                </md-radio-group>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="publicInfo.hide()">
                关闭
            </md-button>
            <md-button class="md-primary" ng-click="publicInfo.status = 'giftcardCode'" ng-disabled="!publicInfo.giftcardAccountId">
                确定
            </md-button>
        </md-dialog-actions>
    </form>
    <form ng-cloak ng-show="publicInfo.status === 'giftcardCode' && !publicInfo.isLoading">
        <md-dialog-content>
            <div class="md-dialog-content">
                <md-input-container class="md-block">
                    <label translate>充值码</label>
                    <input type="text" required name="code" ng-model="publicInfo.giftcardCode">
                </md-input-container>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="publicInfo.hide()">
                关闭
            </md-button>
            <md-button class="md-primary" ng-click="publicInfo.checkGiftCard()" ng-disabled="!publicInfo.giftcardCode">
                确定
            </md-button>
        </md-dialog-actions>
    </form>
    <form ng-cloak ng-show="publicInfo.status === 'refCode' && !publicInfo.isLoading">
        <md-dialog-content>
            <div class="md-dialog-content">
                <md-input-container class="md-block">
                    <label>邀请码数量</label>
                    <input type="text" required name="code" ng-model="publicInfo.refCodeNumber">
                </md-input-container>
                <md-input-container class="md-block">
                    <label>单个邀请码可邀请用户数</label>
                    <input type="text" required name="code" ng-model="publicInfo.refUserNumber">
                </md-input-container>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="publicInfo.hide()">
                关闭
            </md-button>
            <md-button class="md-primary" ng-click="publicInfo.addRefCodeForUser()" ng-disabled="!publicInfo.refCodeNumber || !publicInfo.refUserNumber">
                确定
            </md-button>
        </md-dialog-actions>
    </form>
    <form ng-cloak ng-show="publicInfo.status === 'edit' && !publicInfo.isLoading">
        <md-dialog-content>
            <div class="md-dialog-content">
                <md-input-container class="md-block">
                    <label>MAC地址</label>
                    <input type="text" required name="macAddress" ng-model="publicInfo.mac.macAddress">
                </md-input-container>
                <md-input-container class="md-block" style="height: 54px;">
                    <label>端口</label>
                    <md-select ng-model="publicInfo.mac.account">
                        <md-option ng-value="account.id" ng-repeat="account in publicInfo.account">{{ account.port }}</md-option>
                    </md-select>
                </md-input-container>
                <md-input-container class="md-block" style="height: 54px;">
                    <label>服务器</label>
                    <md-select ng-model="publicInfo.mac.server">
                        <md-option ng-value="server.id" ng-repeat="server in publicInfo.validServer">{{ server.name }}</md-option>
                    </md-select>
                </md-input-container>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="publicInfo.hide()">
                关闭
            </md-button>
            <md-button class="md-primary" ng-click="publicInfo.editMac()">
                确定
            </md-button>
        </md-dialog-actions>
    </form>
</md-dialog>